<template>
    <div id="header">
        <div class="nav-global">
            <div class="container">
                <h1 class="nav-logo">
                    <a href="javascript:;"></a>
                </h1>
                <ul class="nav-aside">
                    <li class="nav-user">
                        <a href="javascript:;">个人中心</a>
                        <!--active-->
                        <div class="nav-user-wrapper">
                            <div class="nav-user-list">
                                <dl class="nav-user-avatar">
                                    <dd><span class="ng-scope"></span></dd>
                                    <dt class="ng-binding">+86 138****9453</dt>
                                </dl>
                                <ul>
                                    <li class="order">
                                        <router-link to="/account/order">我的订单</router-link>
                                    </li>
                                    <li class="address">
                                        <router-link to="/account/address">收货地址</router-link>
                                    </li>
                                    <li class="logout" @click="handleLogout"><a href="javascript:;">退出</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <!--active-->
                    <li class="nav-cart">
                        <a href="javascript:;">购物车</a>
                        <!--根据class改变颜色-->
                        <span class="cart-empty-num cart-num">
                            <i>{{allInfo.allNum}}</i>
                        </span>
                        <!-- 此处渲染导航栏购物车 -->
                        <NavCart/>
                    </li>
                </ul>
                <ul class="nav-list">
                    <li><a href="javascript:;">在线商城</a></li>
                    <li><a href="javascript:;">坚果 Pro</a></li>
                    <li><a href="javascript:;">Smartisan M1 / M1L</a></li>
                    <li><a href="javascript:;">Smartisan OS</a></li>
                    <li><a href="javascript:;">欢喜云</a></li>
                    <li><a href="javascript:;">应用下载</a></li>
                    <li><a href="javascript:;">官方论坛</a></li>
                </ul>
            </div>
        </div>
        <div class="nav-sub">
            <div class="nav-sub-wrapper">
                <div class="container">
                    <ul class="nav-list">
                        <li><a href="javascript:;">首页</a></li>
                        <li><a href="javascript:;">手机</a></li>
                        <li><a href="javascript:;">“足迹系列”手感膜</a></li>
                        <li class="active"><a href="javascript:;">官方配件</a></li>
                        <li><a href="javascript:;">周边产品</a></li>
                        <li><a href="javascript:;">第三方配件</a></li>
                        <li><a href="javascript:;">全部商品</a></li>
                        <li><a href="javascript:;">服务</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import NavCart from './NavCart.vue'
    export default {
        components: {
            NavCart,
        },
        computed: {
            allInfo() {
                return this.$store.getters['cart/allInfo'] 
            }
        },
        methods: {
            handleLogout() {
                this.$store.commit('my/initInfoMut',null)
            }
        },
    }
</script>

<style src="../assets/css/header.css" scoped></style>
